<template>
  <div>
    <el-row>
      <el-col>
        <div id="Sanchi3" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import bus from '../../bus';

  export default {
    data() {
      return {
        msg: '',
        isShow1: false,
        dts: ''
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('Sanchi3'));

        var data = {
          '3000': [
            [100],
            [],
          ],
          '2000': [
            [80],
            [],
          ],
          '1794': [
            [60],
            [],
          ],
          '1200': [
            [40],
            [],
          ],
          '800': [
            [20],
            [],
          ],
        };
        var nodedata = [];
        var university = '3000';
        for (var key in data) {
          var totalnum = data[key][0].reduce(function (a, b) {
            return a + b;
          }, 0) + data[key][1].reduce(function (a, b) {
            return a + b;
          }, 0)
          if (key == university) {
            nodedata.push({
              name: key,
              symbolSize: Math.max(totalnum, 7),
              value: data[key][2],
              label: {
                color: 'rgba(193,56,52,1)'
              },
              itemStyle: {
                normal: {
                  color: 'rgba(193,56,52,1)'
                }
              }
            })
          } else {
            nodedata.push({
                name: key,
                symbolSize: Math.max(totalnum, 3),
                value: data[key][2],
                label: {
                  color: 'black'
                },
                itemStyle: {
                  normal: {
                    color: 'rgba(51,71,85,1)'
                  }
                }

              }
            )
          }
        }

        myChart.setOption(
          {
            title: {
              text: '',
              subtext: '',
              x: 'center',
            },
            tooltip: {},
            series: [{
              type: 'graph',
              layout: 'force',
              /*              roam: true,*/
              data: nodedata,
              label: {
                normal: {
                  position: 'top',
                  show: true,
                  textStyle: {
                    color: 'rgba(18,89,147,1)',
                    fontSize: 15
                  },
                }
              },
              force: {
                repulsion: 400
              },
              links: [],
            },]
          }
        );
        myChart.on('click', function (p) {
          if (p.seriesType == 'graph') {
            var university = p.name;
            var nodedata = [];
            for (var key in data) {
              var totalnum = data[key][0].reduce(function (a, b) {
                return a + b;
              }, 0) + data[key][1].reduce(function (a, b) {
                return a + b;
              }, 0);
              if (key == university) {
                nodedata.push({
                  name: key,
                  symbolSize: Math.max(totalnum, 7),
                  value: data[key][1],
                  label: {
                    color: 'rgba(193,56,52,1)'
                  },
                  itemStyle: {
                    normal: {
                      color: 'rgba(193,56,52,1)'
                    }
                  },
                })
              } else {
                nodedata.push({
                    name: key,
                    symbolSize: Math.max(totalnum, 3),
                    value: data[key][1],
                    label: {
                      color: 'black'
                    },
                    itemStyle: {
                      normal: {
                        color: 'rgba(51,71,85,1)'
                      }
                    },
                  }
                )
              }
            }
            myChart.setOption({
              title: {
                subtext: university,
              },
              series: [{
                data: nodedata
              }]
            });
            this.dts = university;
            this.isShow1 = true;
            bus.$emit('isShow1', this.isShow1);
            bus.$emit('dts', this.dts);
          }
        })
      }
    }


  }
</script>

<style scoped>

</style>
